<template>
    <div>
        <v-title title="我的佣金">
            <span class="opera">查询时间:{{$utils.toTimeFormat(+new Date(),'yyyy年MM月dd日 hh时mm分')}}
                <el-button type="text" class="iconfont icon-shuaxin" @click="refresh"></el-button>
            </span>
        </v-title>
        <div class="wallet-container">
            <v-private-item label="累计佣金" :value="wallet.totalAmount"></v-private-item>
            <v-private-item label="本月佣金" :value="wallet.monthAmount"></v-private-item>
            <v-private-item label="可提现佣金" :value="wallet.freeBalance"></v-private-item>
            <div class="fx-1">
                <!-- <el-button type="text">提现</el-button> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from './title.vue'
  import vPrivateItem from '@/components/home-components/private-item'

  @Component({
    components: {
      vTitle, vPrivateItem
    }
  })
  export default class Store extends Vue {
    @Prop({
      default: () => {}
    }) wallet

    refresh () {
      this.$emit('refresh')
      this.date = +new Date()
    }
  }
</script>

<style lang="less" scoped>
    .wallet-container {
        display: flex;
        .item {
            height: 64px;
            border-left: 2px solid #eaecf3;
            line-height: 32px;
            padding-left: 10px;
            flex: 2;
            .title {
                color: #999;
                font-size: 14px;
            }
            .content {
                font-size: 20px;
                color: #333;
            }
        }
    }

    .opera {
        font-size: 14px;
        cursor: pointer;
    }
</style>
